<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 100%;
            height: 900px;
            display: grid;
            /** 根据 grid-template-columns值 分成格子 */
            border: 1px solid red;
            box-sizing: border-box;
            grid-gap: 10px;
            /*上下左右间隔10px*/
            /*grid-template-rows: auto auto;  横向排列 表示 有3行，每行宽度auto*/
            /* grid-template-columns: auto auto; */
            /*    竖向排列  表示 有3列，每列宽度auto*/


            /* justify-items: center;
            align-items:center; */

            /* grid-template-rows: auto;  */
            grid-template-columns: auto auto;
              /* justify-items: center;
            align-items:center; */

            align-content: space-around;

            /* 
            justify-items：  水平在单个格子占位方式  不限制宽度以内容为准
            start：将内容对齐到网格区域(grid area)的左侧
            end：将内容对齐到网格区域的右侧
            center：将内容对齐到网格区域的中间（水平居中）
            stretch：不限制宽度会填满网格区域宽度（默认值）
            space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
            space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
            space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间
            
            
            align-items： 垂直对齐方式
             start：将内容对齐到网格区域(grid area)的顶部
              end：将内容对齐到网格区域的底部
             center：将内容对齐到网格区域的中间（垂直居中）
             stretch：填满网格区域高度（默认值）*/


             /* align-content：
             start：将网格对齐到 网格容器(grid container) 的顶部
             end：将网格对齐到 网格容器 的底部
             center：将网格对齐到 网格容器 的中间（垂直居中）
             stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
             space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
             space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
             space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间 */
        }

        .b {
            background-color: yellow;
            border: 1px solid blue;
            height: 300px;
            /* width: 200px; */
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="b">1</div>
        <div class="b">1</div>
        <div class="b">1</div>
        <div class="b">1</div>
        <!-- <div class="b">2</div>
        <div class="b">2</div> -->
    </div>
</body>

</html>